<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { getEmpJobData, getEmpGenderData } from "@/api/report";
import { ElMessage } from "element-plus";

// 定义图表引用
const jobChartRef = ref(null);
const genderChartRef = ref(null);

// 获取员工职位信息统计数据
const jobChartData = ref({ jobList: [], dataList: [] });
// 获取员工性别信息统计数据
const genderChartData = ref([]);

// 获取员工职位信息统计数据
const getJobChartData = async () => {
  const res = await getEmpJobData();
  if (res.code) {
    jobChartData.value = res.data;
  } else {
    ElMessage.error(res.msg);
  }
};

// 获取员工性别信息统计数据
const getGenderChartData = async () => {
  const res = await getEmpGenderData();
  if (res.code) {
    genderChartData.value = res.data;
  } else {
    ElMessage.error(res.msg);
  }
};

// 初始化员工职位柱状图
const initJobChart = () => {
  const jobChart = echarts.init(jobChartRef.value);
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    xAxis: {
      type: "category",
      data: jobChartData.value.jobList, // 使用 jobList 作为 x 轴数据
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "员工数量",
        type: "bar",
        data: jobChartData.value.dataList, // 使用 dataList 作为 y 轴数据
        barWidth: 80, // 柱状图宽度
        itemStyle: {
          color: "#5470C6", // 柱状图颜色
        },
      },
    ],
  };
  jobChart.setOption(option);
};

// 初始化员工性别圆角环形图
const initGenderChart = () => {
  const genderChart = echarts.init(genderChartRef.value);
  const option = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    legend: {
      top: "5%",
      left: "center",
    },
    series: [
      {
        name: "员工性别",
        type: "pie",
        radius: ["50%", "70%"], // 环形图内外半径
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10, // 圆角
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: genderChartData.value, // 性别数据
      },
    ],
  };
  genderChart.setOption(option);
};

onMounted(async () => {
  await getJobChartData();
  initJobChart();
  await getGenderChartData();
  initGenderChart();
});
</script>

<template>
  <h1>员工信息统计</h1>
  <div
    class="chart-container"
    style="display: flex; justify-content: space-between"
  >
    <div ref="jobChartRef" style="width: 50%; height: 400px"></div>
    <div ref="genderChartRef" style="width: 50%; height: 400px"></div>
  </div>
</template>

<style scoped>
h1 {
  color: #5470c6;
  font-size: 24px;
  font-family: "Courier New", Courier, monospace;
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>
